<template>
  <!--    我是首页-->
  <!--    <el-button type="primary" @click="gotolink">登录</el-button>-->
  <!--最顶部 导航条+巨幕+幻灯片-->
  <div class="row">
    <div class="col-md-12 column">
      <!-- 导航条 -->
      <nav class="topnav navbar navbar-expand-lg navbar-dark fixed-top" style="font-size: 20px;" :style="topNavBg">
        <div class="container-fluid">
          <span class="mr-3 iconbox iconsmall fill rounded-circle bg-white text-black shadow border-0"><i class="fa fa-book fa-lg" aria-hidden="true" id="fa-book"></i></span>
          <a class="navbar-brand ml-1" href="/" style="font-size: 25px;color:white;"><strong>嘉庚考研圈</strong></a>
          <!-- Toggler -->
          <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <!-- Collapse -->
          <div class="navbar-collapse collapse ml-3" id="navbarColor02">
            <ul class="navbar-nav mr-auto d-flex align-items-center" id="nav_contain">
              <!-- 有下拉菜单-->
              <li class="nav-item dropdown "  data-toggle="hover">
                <a class="nav-link" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="change_infor()">
                  考研资讯 </a>
                <div class="dropdown-menu p-3" aria-labelledby="navbarDropdown1" style="font-size:15px;">
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black" @click="change_KaoYan()">考研信息</a>
                  <a class="dropdown-item" href="javascript:void(0);" style="color: black">特别推荐</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_colle()">院校信息</a>
              </li>
              <!-- 有下拉菜单-->
              <li class="nav-item dropdown "  data-toggle="hover">
                <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="change_dis()">
                  交流讨论社区 </a>
                <div class="dropdown-menu p-3" aria-labelledby="navbarDropdown" style="font-size:15px;">
                  <a class="dropdown-item" href="" style="color: black">学长学姐说</a>
                  <a class="dropdown-item" href="" style="color: black">日常生活</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_res()">闲置转卖</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_soc()">积分中心</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="javascript:void(0);" @click="change_colle()">常见问题</a>
              </li>
            </ul>
            <!--                搜索框-->
            <form class="form-inline my-2 my-lg-0 mr-4">
              <input class="form-control mr-sm-2" type="search" placeholder="请输入内容" aria-label="Search">
              <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
            </form>
            <!--                小图标-->
            <ul class="navbar-nav" id="navbar_ul">
              <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-commenting" aria-hidden="true"></i></a></li>
              <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-bell fa-lg" aria-hidden="true"></i></a></li>
              <li class="nav-item"><a class="nav-link" href="#"><i class="fa fa-user-circle fa-lg" aria-hidden="true"></i></a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
import "@/assets/css/main.css"
import "@/assets/css/aos.css"

export default {
  name: "loginheader",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      //设置导航栏变色
      topNavBg: {
        backgroundColor: ''
      }
    };
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    gotolink(){
      //点击跳转至上次浏览页面
      // this.$router.go(-1)
      //指定跳转地址
      this.$router.replace('/Login')
    },
    // 滚动页面时触发导航变色
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 设置背景颜色的透明度
      if (scrollTop) {
        this.topNavBg.backgroundColor = `rgba(183, 193, 172,
	        	${scrollTop / (scrollTop + 60)})` // scrollTop + 多少根据自己的需求设置
      } else if (scrollTop === 0) {
        this.topNavBg.backgroundColor = 'transparent' // 设置回到顶部时，背景颜色为透明
      }
    },
    // 滚动之前重置
    beforeDestroy () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    change_infor()
    {
      if(this.$router.history.current.path !='/Information'){
        this.$router.push({path:'/Information'});
      }
    },
    change_dis(){
      if(this.$router.history.current.path !='/Discussion'){
        this.$router.push({path:'/Discussion'});
      }
    },
    change_res()
    {
      if(this.$router.history.current.path !='/Resale'){
        this.$router.push({path:'/Resale'});
      }
    },
    change_colle(){
      if(this.$router.history.current.path !='/Colleges'){
        this.$router.push({path:'/Colleges'});
      }
    },
    change_soc(){
      if(this.$router.history.current.path !='/Score'){
        this.$router.push({path:'/Score'});
      }
    },
    change_KaoYan(){
      if(this.$router.history.current.path !='/KaoYan_Infor'){
        this.$router.push({path:'/KaoYan_Infor'});
      }
    }
  },
}
</script>

<style scoped>
.topnav
{
  /*z-index: 100;*/
  /*color: inherit;*/
  /*opacity: 0.9;*/
}
/*下拉菜单悬停*/
/*悬停显示*/
.navbar-nav .dropdown:hover>.dropdown-menu {
  display: block;
}
/*虚化菜单按钮  就是 让点击无效的意思*/
.navbar-nav .dropdown>.dropdown-toggle:active
{
  pointer-events: none;
}
/*导航栏样式设置*/
.navbar-nav>ul
{
  margin-left: 0px;
}
#nav_contain>li>a
{
  margin-left:20px;
  font-size: 16px;
  color: white;
}
#nav_contain>li>a:hover
{
  font-weight: bold;
}
/*小图标*/
#navbar_ul>li>a>i
{
  color: white;
}
#navbar_ul>li>a>i:hover
{
  color: #223F23;
}
#navbar_ul>li
{
  margin-left: 13px;
}
.jumbotron
{
  background: url('~@/assets/back.jpg') no-repeat center;
  background-size:cover;
  line-height: 10px;
  margin-left: -15px;
  margin-right: -15px
}
/*走马灯img*/
/*.carousel{*/
/*  box-shadow: 10px 10px 5px #888888;*/
/*}*/
a,li,ul,h1,h2,h3,h4,h5{
  font-family: YouYuan;
  color: white;
}

/*.navbar-brand>strong:hover*/
/*{*/
/*  font-size: 26px;*/
/*}*/
#fa-book
{

}
</style>
